<template>
  <div class="servicePageOrderList padding_20">
    <el-input v-model="param.userName"
              placeholder="用户姓名"
              class="w-200"
              @clear="handleQuery"
              clearable />
    <el-input v-model="param.userPhone"
              placeholder="请输入用户电话"
              class="w-200"
              @clear="handleQuery"
              clearable />
    <el-input v-model="param.hospitalName"
              placeholder="请输入医院"
              class="w-200"
              @clear="handleQuery"
              clearable />
    <!-- <Input v-model="param.doctorName" placeholder="医生姓名" class="input_1" clearable/> -->
    <!-- <Input v-model="param.doctorPhone" placeholder="医生电话" class="input_1" clearable/> -->
    <DatePicker type="date"
                v-model="param.startTime"
                placeholder="请选择起始日期"
                class="datePicker_1"></DatePicker>
    <DatePicker type="date"
                v-model="param.endTime"
                placeholder="请选择截止日期"
                class="datePicker_1"></DatePicker>
    <el-button type="primary"
               @click="handleQuery">查 询</el-button>
    <el-button type="primary"
               @click="servicePackageExport(param)">导 出</el-button>
    <Table :columns="tableCol"
           :data="tableData"
           border
           class="mt-20">
      <template slot-scope="{row}"
                slot="action">
        <span v-if="row.orderVolunteerDto !== undefined">
          <span v-if="row.orderVolunteerDto.status === 1"
                @click="configurationView(row)">配置义工</span>
          <span v-if="row.orderVolunteerDto.status === 2">已配置</span>
        </span>
        <span @click="handleView(row)">详细</span>
      </template>
    </Table>
    <page @getList="_getList"
          :pageTotal="pageTotal"
          ref="page"></page>
  </div>
</template>

<script>
  import Page from '@/base/page/page'
  import { mapGetters } from 'vuex'
  import { orderMgt } from '@/api/codeName'

  export default {
    name: "servicePageOrderList",
    data () {
      return {
        tableCol: [
          {
            type: 'index2',
            title: '',
            width: 60,
            render: (h, params) => {
              return h('span', params.index + (this.page.pageIndex) * this.page.pageSize + 1);
            }
          },
          {
            title: '用户',
            key: 'nickName',
            render: (h, params) => {
              return h('span', params.row.userDto.nickName);
            }
          },
          {
            title: '电话',
            key: 'loginName',
            render: (h, params) => {
              return h('span', params.row.userDto.loginName);
            }
          },
          {
            title: '订单编号',
            key: 'orderNumber'
          },
          {
            title: '订单来源',
            key: 'channelName'
          },
          {
            title: '服务包类型',
            key: 'servicePackageType'
          },
          {
            title: '推销账号',
            key: 'salesForce'
          },
          {
            title: '订单名称',
            key: 'tradeName'
          },
          {
            title: '医院',
            key: 'hospital_name'
          },
          {
            title: '工作室',
            key: 'studioName',
          },
          {
            title: '金额（元）',
            key: 'money',
          },
          {
            title: '剩余时长（月）',
            key: 'usedMonth',
            render: (h, params) => {
              return h('span', params.row.totalMonth - params.row.usedMonth);
            }
          },
          {
            title: '合计时长（月）',
            key: 'totalMonth',
          },
          {
            title: '订单类型',
            key: 'orderType',
            render: (h, params) => {
              // for (let i = 0; i < orderMgt.servicePageOrderMgt.orderType.length; i++) {
              // if (params.row.orderType == orderMgt.servicePageOrderMgt.orderType[i].code) {
              return h('span', '服务包订单');
              // }
              // }
            }
          },
          {
            title: '订单状态',
            key: 'orderStatus',
            render: (h, params) => {
              for (let i = 0; i < orderMgt.servicePageOrderMgt.orderStatus.length; i++) {
                if (params.row.orderStatus == orderMgt.servicePageOrderMgt.orderStatus[i].code) {
                  return h('span', orderMgt.servicePageOrderMgt.orderStatus[i].name);
                }
              }
            }
          },
          {
            title: '创建时间',
            key: 'createTime',
            width: 150,
            render: (h, params) => {
              return h('span',
                this.commonFunction.timestampFormat(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm'));
            }
          },
          {
            title: '操作',
            slot: 'action',
            width: 150,
            align: 'center'
          }
        ],
        tableData: [],
        pageTotal: 0,       //总条数
        wdStudioTypeList: [],
        hospitalList: [],
        loading: false,
        param: {
          serviceType: 13,
          userName: '',
          userPhone: '',
          doctorName: '',
          doctorPhone: '',
          hospitalName: '',
          startTime: '',
          endTime: ''
        }
      }
    },
    mounted () {
      if (this.params.wdStudio) {
        this.param = this.params.wdStudio
      } else {
        this.$store.commit('SET_PARAMS', { wdStudio: this.param })
      }
      this._getList()
    },
    methods: {
      handleQuery () {
        this.page.pageIndex = 0;
        this._getList()
      },
      handleView (row) {
        this.$router.push({ name: 'servicePageOrderView', query: { id: row.id } })
      },
      configurationView (row) {
        this.$router.push({ name: 'configurationVolunteerView', query: { id: row.orderVolunteerDto.id } })
      },
      _getList () {
        this.ajax({
          type: this.api.servicePageOrderList.type,
          url: this.api.servicePageOrderList.url,
          data: Object.assign({}, this.page, this.param),
          success: (data) => {
            this.tableData = data.object;
            this.pageTotal = data.totalNum;
            this.$previewRefresh()
          },
          error: (data) => {
            this.$Message.error(data.message);
          }
        })
      },
      servicePackageExport (param) {
        param.startTime = this.commonFunction.timestampFormat(new Date(param.startTime), 'yyyy-MM-dd');
        param.endTime = this.commonFunction.timestampFormat(new Date(param.endTime), 'yyyy-MM-dd');
        let paramStr = '';
        for (let key in param) {
          paramStr += key + '=' + param[key] + '&'
        }
        window.location.href = this.api.orderExport.url + '?' + paramStr
      },
    },
    computed: {
      ...mapGetters([
        'page',
        'params'
      ])
    },
    components: {
      Page
    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/scss">
  .servicePageOrderList {
  }
</style>
